<template>
  <div class="app-container">
      <!-- 基础数据 -->
      <div class="box" v-if="isStudent">
        <div class="volun-time"><h4>志愿服务时长：<span>{{userBasic.volunteerTime}}</span> 小时</h4></div>
        <div class="volun-grade">
          <div>
            综合评价：
          </div>
          <span>
            <el-rate
              v-model="agvGrade"
              disabled
              text-color="#ff9900"
              show-text
            >
            </el-rate>
          </span>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 参与的任务列表数据 -->
      <el-col :xs="24">

        <!--   查询筛选条件   -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
          <el-form-item label="活动名称" prop="activityName">
            <el-input
              v-model="queryParams.activityName"
              placeholder="请输入活动名称"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="活动报名状态" prop="deptId">
            <el-select v-model="queryParams.applyState" placeholder="请选择">
              <el-option
                v-for = "dict in dict.type.activity_apply_state"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" class="typeface" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" class="typeface" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!--    数据列表    -->
        <el-table v-loading="loading" :data="volunteerList">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="活动编号" align="center" key="activityId" prop="activityId" v-if="columns[0].visible" />
          <el-table-column label="活动名称" align="center" key="activityName" prop="activityName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="所属部门" align="center" key="deptId" prop="deptName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="所需人数" align="center" key="num" prop="num" v-if="columns[3].visible" :show-overflow-tooltip="true" />
          <el-table-column label="是否可以报名" align="center" key="applyState" prop="applyStateName" v-if="columns[4].visible" width="120"/>
          <el-table-column label="评分" align="center" key="grade" prop="grade" v-if="columns[5].visible">
            <template slot-scope="scope">
              <el-rate
                v-model="agvGrade"
                disabled
                text-color="#ff9900"
                show-text
              >
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-document"
                @click="handleInfo(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>

  </div>
</template>

<script>

  import { treeselect } from "@/api/system/dept";
  import { basic, listActivity } from "@/api/volunteer/index";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "Index",
    dicts: ['activity_state', 'activity_apply_state'],
    components: { Treeselect },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        //用户基本数据
        userBasic:{},
        //平均评分
        agvGrade: 0,
        // 用户活动数据
        volunteerList: null,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 显示搜索条件
        showSearch: true,
        //是否为学生
        isStudent: false,
        // 部门名称
        deptName: undefined,
        // 日期范围
        dateRange: [],
        // 表单参数
        form: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          createBy: undefined,
          activityName: undefined,
          beginTime: undefined,
          endTime: undefined,
          status: undefined,
          deptId: undefined,
          applyState: undefined
        },
        // 列信息
        columns: [
          { key: 0, label: `用户编号`, visible: true },
          { key: 1, label: `用户名称`, visible: true },
          { key: 2, label: `用户昵称`, visible: true },
          { key: 3, label: `学院`, visible: true },
          { key: 4, label: `手机号码`, visible: true },
          { key: 5, label: `志愿时长`, visible: true },
          { key: 6, label: `评分`, visible: true },
          { key: 7, label: `创建时间`, visible: true }
        ],
      };
    },
    created() {
      this.getList();
      this.getBasic();
    },
    methods: {
      /** 获取基本数据 */
      getBasic(){
        basic().then(response =>{
          console.log('response', response);
          this.userBasic = response.data.user;
          this.agvGrade = response.data.agvGrade;
          this.isStudent = response.data.isStudent;
          this.showGrade(this.isStudent);
        });
      },


      /** 查询活动列表 */
      getList() {
        this.loading = true;
        listActivity(this.queryParams).then(response => {
          console.log('queryParams', this.queryParams)
            this.volunteerList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        if(this.dateRange != null) {
          this.queryParams.beginTime = this.dateRange[0];
          this.queryParams.endTime = this.dateRange[1];
        }else {
          this.queryParams.beginTime = undefined;
          this.queryParams.endTime = undefined;
        }
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.queryParams.applyState = undefined;
        this.handleQuery();
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      /** 评分是否显示 */
      showGrade(isStuent){
          this.columns[5].visible = isStuent;
      },
      /** 活动详情 */
      handleInfo: function(row){
        let activityId = row.activityId;
        console.log(activityId);
        let that = this
        if(this.isStudent){
          //学生进入从定向到详情页
          this.$router.push("/zq/volunteer/getInfo/" + activityId);
        }else {
          //非学生，进入评价页
          // debugger
          that.$router.push({path:"zq/evaluationDetails/evaluationDetails",query:{activityId:activityId}});
          // this.$router.push("zq/evaluationDetails/evaluationDetails/" + activityId);
        }
      }
    }
  };
</script>



<style scoped>
  .box{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box>div{
    margin: 0 100px;
  }
  .volun-grade{
    display: flex;
    justify-content: center;
  }

  .app-container{
    overflow: hidden;
  }

</style>
